<script setup>
import router from "@/router.js";
import {formatDate} from "@/utils/format.js";
import {useRequest} from "ahooks-vue";
import {ApiGetHistories} from "@/api/scheduler.js";
import {ref, watch} from "vue";
import 'xterm/css/xterm.css'
import {Terminal} from "xterm";
import {FitAddon} from "xterm-addon-fit";
import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon'
import {useRoute} from "vue-router";

const route = useRoute();
const taskId = route.query.task_id

const xtermContainer = ref()
const term = ref()
let currentContent = '';
const visibleContent = ref(false)
const data = ref([])

const {loading: dataLoading, run, refresh} = useRequest(ApiGetHistories, {
    defaultParams: [{
        page: 0,
        page_size: 10,
        task_id: taskId
    }],
    onSuccess: (e) => {
        data.value = e.data
    }
})

watch(xtermContainer, (newValue) => {
    if (newValue !== undefined && newValue !== null) {
        term.value = new Terminal({
            fontSize: 14,
            convertEol: false, // 启用时，光标将设置为下一行的开头
            rendererType: 'canvas', // 渲染类型
            cursorBlink: false, // 光标闪烁
            theme: {
                background: '#060101', // 背景色
                cursor: 'help' // 设置光标
            },
            scrollback: 10000,
        })
        const fitAddon = new FitAddon();
        term.value.loadAddon(fitAddon);
        term.value.open(xtermContainer.value)
        fitAddon.fit();
//        term.value.clear()
        term.value.write(currentContent)
    }
})

const showLogFunc = (value) => {
    currentContent = value.data.content
    visibleContent.value = true
  }

</script>

<template>
    <div class="card" style="height: 80vh">
         <div  class="font-semibold text-xl mb-4">任务执行历史</div>
        <DataTable
        :value="data.list"
        dataKey="id"
        :loading="dataLoading"
        selectionMode="single"
        @row-click="showLogFunc"
        scrollable
        scrollHeight="50vh"
        >
            <template #header>
                <div class="flex justify-content-between">
                    <IconField iconPosition="left">
                        <InputIcon>
                            <i class="pi pi-search"/>
                        </InputIcon>
                        <InputText placeholder="关键字搜索"/>
                    </IconField>
                </div>
            </template>

            <Column field="task_name" header="任务名称"></Column>
            <Column field="script_name" header="脚本"></Column>
            <Column field="status" header="状态">
                <template #body="slotProps">
                    <Tag severity="success" value="成功" v-if="slotProps.data.status === 0"></Tag>
                    <Tag severity="danger" value="失败" v-else></Tag>
                </template>
            </Column>
            <Column field="create_time" header="执行时间">
                <template #body="slotProps">
                    {{ formatDate(slotProps.data.create_time) }}

                </template>
            </Column>
            <!--<Column field="history" header="日志">-->
            <!--    <template #body="slotProps">-->
            <!--        <a @click="() => {currentContent = slotProps.data.content;visibleContent = true}">查看</a>-->
            <!--    </template>-->
            <!--</Column>-->
            <Column field="username" header="创建者"></Column>
        </DataTable>
        <Paginator
            :page="0"
            :rows="10"
            :totalRecords="data.total"
            :rowsPerPageOptions="[10, 20, 30, 50]"
            template="FirstPageLink PrevPageLink PageLinks  NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
            currentPageReportTemplate="{totalRecords}条"
            @page="(PageState) => run({page:PageState.page, page_size: PageState.rows})">
        </Paginator>
    </div>

    <Dialog v-model:visible="visibleContent" modal header="任务执行日志" :style="{ width: '60rem' }">
        <div ref="xtermContainer" style="height: 25rem"/>
    </Dialog>
</template>

<style scoped>

</style>